<template>
    <div>
        <el-card shadow="never" style="margin-bottom: 15px">
            <!-- 搜索部分 -->
            <el-form :inline="true"  class="demo-form-inline"  :model="searchData">
                <el-form-item label="状态:" prop="state" >
                     <el-select
                    v-model="searchData.state"
                     style="width: 250px">
                        <el-option
                        label="显示"
                        :value="1"
                    />
                    <el-option
                        label="隐藏"
                        :value="0"
                    />
                     </el-select>
                </el-form-item>
                <el-form-item label="身份昵称:" prop="name">
                    <el-input v-model="searchData.name" placeholder="请输入身份昵称"></el-input>
                </el-form-item>
                <el-form-item >
                     <el-button type="primary" @click="searchRoles">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card shadow="never">
        <el-card>
            <!-- 表格渲染 -->
             <el-button type="primary" style="margin-bottom: 10px;"
              @click="openDialog()">添加角色</el-button>
            <BaseTable :data="tableData.rows" 
            :total="tableData.total" 
            :checkbox="checkbox" 
            v-model="pageData"
                :columns="columns">
                <template #state="{ row }">
                    <el-switch v-model="row.state" inline-prompt 
                        :active-value="1"
                        active-text="开启"
                        inactive-text="关闭"
                        :inactive-value="0"></el-switch>
                </template>
                <template #action="{ row }">
                     <a href="#" @click.prevent="updateGoddsFile(row)" style="margin-right: 15px">编辑</a>
                     <a href="#" @click.prevent="deleteGoddsFile(row)">删除</a>
                </template>
            </BaseTable>
            <!-- 编辑弹出框 -->
            <RolesManageDialog2 
            @getAllRoles="getAllRoles"
            ref="rolesRef"
         /> 
        </el-card>
        
    </div>
</template>

<script setup lang="ts">
import api from '@/api';
import { onMounted, ref, reactive,watch, useTemplateRef } from 'vue';
import { UserManageItm } from '@/api/modules/authorityMenu';
import { ElMessage } from 'element-plus';
import RolesManageDialog2 from './dialog/RolesManageDialog2.vue';
const rolesRef=useTemplateRef<InstanceType<typeof RolesManageDialog2>>("rolesRef")
const columns = [
    {
        label: 'ID',
        prop: '_id'
    },
    { label: '身份昵称', prop: 'name' },
    {
        label: '状态',
        prop: 'state'
    },
    {
        label: '操作',
        prop: 'action'
    },
]
const openDialog=()=>{
    rolesRef.value!.openDia()
}
// 查询角色的数据
const searchData=ref({
    state:'',
    name:""
})
let tableData = reactive({
    rows: [],
    total: 0
})
const checkbox = ref(false)
// 分页数据
const pageData = ref<PageQuery>({
    currentPage: 1,
    pageSize: 10
})
// 一个角色
const ruleForm=ref<any>({})
// 配送员分页条变化
watch(pageData.value, () => {
    getAllRoles(), {
        deep: true
    }
})
// 点击查询角色(搜索功能)
const searchRoles=async()=>{
    console.log(2);
    const res= await api.roleManage.search({...searchData.value,...pageData.value})
    // console.log(res);
    if(res.code==200){
        tableData.rows=res.data.rows
        tableData.total=res.data.total
    }
}
// 删除一个角色
const deleteGoddsFile=(_id:string)=>{
    api.authorityMenu.remove({
        _id,
        creator: 'twy'
    }).then(res => {
        if (res.code == 200) {
            getAllRoles();
            ElMessage.success('角色数据删除成功');
        } else {
            ElMessage.error(res.message);
        }
    })
}
onMounted(() => {
    getAllRoles()
})
// 获取所有角色分页
const getAllRoles = async () => {
    const res = await api.roleManage.search({
         creator: "twy",...pageData.value
        })
    if (res.code == 200) {
        console.log(res,777);
        tableData.rows = res.data.rows
        tableData.total=res.data.total
    }
}

// 点击编辑回显菜单
const updateGoddsFile=(data?:UserManageItm)=>{
    ruleForm.value={...data}
    rolesRef.value!.openDia(data)
}
</script>

<style scoped></style>